<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 3.9.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"ywg.imfast.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"right","Muse | Mist":320,"display":"post","padding":18,"offset":12,"onmobile":true},"copycode":{"enable":true,"show_result":true,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":false,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。 字典：《权威指南》《高级程序设计》 js 运行三部曲：1 语法分析 → 2 预编译 → 3 解释执行 变量名可以包括英文字母、_、$、数字 多变量声明：    var a,        b,        c;内存堆栈：重新赋值">
<meta name="keywords" content="js,前端">
<meta property="og:type" content="article">
<meta property="og:title" content="javascript笔记">
<meta property="og:url" content="https://ywg.imfast.io/2018/11/26/js/index.html">
<meta property="og:site_name" content="中·庸">
<meta property="og:description" content="JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。 字典：《权威指南》《高级程序设计》 js 运行三部曲：1 语法分析 → 2 预编译 → 3 解释执行 变量名可以包括英文字母、_、$、数字 多变量声明：    var a,        b,        c;内存堆栈：重新赋值">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-10-11T15:32:52.878Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="javascript笔记">
<meta name="twitter:description" content="JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。 字典：《权威指南》《高级程序设计》 js 运行三部曲：1 语法分析 → 2 预编译 → 3 解释执行 变量名可以包括英文字母、_、$、数字 多变量声明：    var a,        b,        c;内存堆栈：重新赋值">

<link rel="canonical" href="https://ywg.imfast.io/2018/11/26/js/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>javascript笔记 | 中·庸</title>
  


  <script data-pjax>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?5b0bac5c2f7738d023171c65307bcc43";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">中·庸</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">斯人若彩虹，遇上方知有</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="tags fa-fw"></i>标签<span class="badge">9</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="th fa-fw"></i>分类<span class="badge">9</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="archive fa-fw"></i>归档<span class="badge">10</span></a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://ywg.imfast.io/2018/11/26/js/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="zhiheng">
      <meta itemprop="description" content="programming and life">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="中·庸">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          javascript笔记
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-11-26 17:08:58" itemprop="dateCreated datePublished" datetime="2018-11-26T17:08:58+08:00">2018-11-26</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2019-10-11 23:32:52" itemprop="dateModified" datetime="2019-10-11T23:32:52+08:00">2019-10-11</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/js/" itemprop="url" rel="index"><span itemprop="name">js</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。</p>
<p>字典：《权威指南》《高级程序设计》</p>
<p>js 运行三部曲：1 语法分析 → 2 预编译 → 3 解释执行</p>
<p>变量名可以包括英文字母、_、$、数字</p>
<p>多变量声明：<br>    var a,<br>        b,<br>        c;<br>内存堆栈：重新赋值不会覆盖，会新开辟空间</p>
<p>imply global 暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象(window)所有。<br>　　函数内赋值也不例外<br>function test () {<br>      var a = b = 3;  // b为全局变量<br>}
　　</p>
<p>　　switch case语句会执行case语句不严格，需要break停止 ：用处：多个确定值判断</p>
<a id="more"></a>

<p>字符编码：</p>
<p>　　ASCII字符以\x##形式的十六进制表示 用\u####表示一个Unicode字符</p>
<p>2 / 0; // Infinity<br>0 / 0; // NaN</p>
<p>唯一能判断NaN的方法是通过isNaN()函数<br>要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：<br>Math.abs(1 / 3 - (1 - 2 / 3)) &lt; 0.0000001; // true<br>自动类型转换：</p>
<p>　　任何数据类型加字符串都等于字符串</p>
<p>例 var a = 1 + “a” + 1 + 1; //打印 1a11<br>例 var a = 1 + 1 + “a” + 1 + 1; //打印 2a11，从左向右运算<br>例 var a = 1 + 1 + “a” +( 1 + 2); //打印 2a3<br>　　很多实践中推荐禁止使用“ ==”，而要求程序员进行显式地类型转换后，用 === 比较。</p>
<p>==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；</p>
<p>===比较，它不会自动转换数据类型，先判断数据类型。</p>
<p>+= 累加 ， <em>= 幂乘：阶乘：mul</em>=i , 2次幂乘：mul*=2</p>
<p>js独创自动类型转换：方便计算</p>
<p>js类型识别：<br>　　typeof（） 可以识别标准类型，其他都是object，function共6种； typeof（var）=&gt; undefined</p>
<p>　　Object.prototype.toString 识别内置对象类型</p>
<p>null 是 JavaScript 关键字（变量），undefined不是关键字，是数据类型(字符串)</p>
<p>Number类型：</p>
<p>Javascript 只有一种数字类型(即 64位 IEEE 754 双精度浮点 double)。<br>    // double 有 52 位表示尾数，足以精确存储大到 9✕10¹⁵ 的整数。<br>非整数的Number类型无法用 ==（===也不行） 来比较，0.1+0.2不能=0.3<br>正确的比较方法是使用JavaScript提供的最小精度值：</p>
<p>  console.log( Math.abs(0.1 + 0.2 - 0.3) &lt;= Number.EPSILON);<br>例 var a = 0 / 0； //答案是 NaN，应该得出一个数字类型的数，但是没法表达，<br>就用 NaN (NaN 是 Not a Number，不是数，但是是数字类型<br>例 var a = 1 / 0; //是 infinity<br>例 var a = -1 / 0; /是-infinity<br>JavaScript中有 +0 和 -0，在加法类运算中它们没有区别，但是除法的场合则需要特别留意区分，“忘记检测除以-0，而得到负无穷大”的情况经常会导致错误，而区分 +0 和 -0 的方式，正是检测 1/x 是 Infinity 还是 -Infinity。</p>
<p> 堆栈空间分配区别：</p>
<p>　　1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；<br>　　2、堆（操作系统）： 存储复杂类型(对象)，一般由程序员分配释放， 若程序员不释放，由垃圾回收机制回收，分配方式类似于链表。</p>
<ul>
<li>注意：JavaScript中没有堆和栈的概念，此处我们用堆和栈来讲解，目的方便理解和方便以后的学习。</li>
</ul>
<p>String：</p>
<p>字符串的最大长度，实际上是受字符串的编码长度影响的。</p>
<p>　　多行字符串：<code></code>     模板字符串： ${ 变量}</p>
<p>　　常用方法：toUpperCase() toLowerCase() indexOf() subString()</p>
<p> 复制字符串：document.write(‘jspang|’.repeat(3));</p>
<p>json 转数组：  Array.from（）用于将对象转为真正的数组。<br>　　arr=Array.from(json);<br>Array.of()方法：把一堆文本或者变量转换成数组<br>   字符串与数组转换：</p>
<p> 　　string.split(separator,limit)    默认的是加个 [] ；   str.split(‘’) 分隔每个元素</p>
<p>　　 arr.join()  把arr每个元素转换为str，再连接   //  默认逗号连接　（如果Array的元素不是字符串，将自动转换为字符串后再连接）</p>
<p> 　　arr.toString()：元素用逗号隔开</p>
<p>　　</p>
<p>数组可以包括任意数据类型. Array也是对象　方法：indexOf（） push（）sort()排序  删：pop（） unshift()shift()</p>
<p> slice()切片:该方法并不会修改数组，而是返回一个子数组。<br> concat()方法可以接收任意个元素和Array 返回了一个新的Array<br> 改：reverse() 会改变原来的数组，而不会创建新的数组。　<br> splice()方法是修改Array的“万能方法”，用于插入、删除或替换数组的元素 // 它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素，返回删除的元素。</p>
<p>　　　　array.splice(index,howmany,item1,…..,itemX)  // 未规定howmany，则删除从 index 开始到原数组结尾的所有元素。</p>
<p>注意：和concat()不同，splice并不将他插入的参数展开。也就是如果插入一个数组，他就是插入数组本身，还不是数组的元素。<br>而concat()插入数组的话，就会把数组展开，插入数组中的元素，不过当插入的数组里<br>还有数组的时候，就不会展开了。</p>
<p>直接给Array的length赋一个新的值会导致Array大小的变化：</p>
<p>　通过索引赋值时，索引超过了范围，同样会引起Array大小的变化：</p>
<p>var arr = [1, 2, 3];<br>arr[5] = ‘x’;<br>arr; // arr变为[1, 2, 3, undefined, undefined, ‘x’]<br>var a = [1,2,3];<br>delete a[1];  //  a = [1,empty,3]<br>a.length;  // 3
　　</p>
<p>　es6新增数据类型: symbol 全局标记声明，它是一切非字符串的对象key的集合，js key可以是字符串或者 Symbol类型</p>
<p>声明方式：使用全局Symbol（）函数</p>
<p>JavaScript 语言设计上试图模糊对象和基本类型之间的关系，我们日常代码可以把对象的方法在基本类型上使用（. 运算符提供了装箱操作，它会根据基础类型构造一个临时对象，使得我们能在基础类型上调用对应对象的方法）  js中基本类型与对象不同，各自独立</p>
<p> Objects：</p>
<p>宿主对象（host Objects）：由JavaScript宿主环境提供的对象，它们的行为完全由宿主环境决定。</p>
<p>内置对象（Built-in Objects）：由JavaScript语言提供的对象。</p>
<p>　　固有对象（Intrinsic Objects ）：由标准规定，随着JavaScript运行时创建而自动创建的对象实例。<br>　　原生对象（Native Objects）：可以由用户通过Array、RegExp等内置构造器或者特殊语法创建的对象。<br>　　普通对象（Ordinary Objects）：由{}语法、Object构造器或者class关键字定义类创建的对象，它能够被原型继承。</p>
<p>键都是字符串类型，可以不加引号 值可以是任意数据类型 。 属性名尽量使用标准的变量名，用[ ]访问带有特殊符号的属性必须加引号</p>
<p>对象：无序集合。  数组：有序集合</p>
<p>　　要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：</p>
<p>var xiaoming = {<br>    name: ‘小明’<br>};<br>xiaoming.hasOwnProperty(‘name’); // true<br>xiaoming.hasOwnProperty(‘toString’); // false<br>　　for … in循环，把一个对象的所有属性依次循环出来：</p>
<p>　　要过滤掉对象继承的属性，用hasOwnProperty()来实现：</p>
<p>var o = {<br>    name: ‘Jack’,<br>    age: 20,<br>    city: ‘Beijing’<br>};<br>for (var key in o) {<br>    if (o.hasOwnProperty(key)) {<br>        console.log(key); // ‘name’, ‘age’, ‘city’<br>    }<br>}<br>Map:</p>
<p>　　初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：</p>
<p>var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);<br>m.get(‘Michael’); // 95<br>var m = new Map(); // 空Map<br>m.set(‘Adam’, 67); // 添加新的key-value<br>m.set(‘Bob’, 59);<br>m.has(‘Adam’); // 是否存在key ‘Adam’: true<br>m.get(‘Adam’); // 67<br>m.delete(‘Adam’); // 删除key ‘Adam’<br>m.get(‘Adam’); // undefined<br>Set: add() delete()</p>
<p>iterable：Array、Map和Set都属于iterable类型。</p>
<p>　遍历：for ···· of 遍历iterable类型，只循环集合本身的元素</p>
<p>　　 使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：</p>
<p>‘use strict’;<br>var a = [‘A’, ‘B’, ‘C’];<br>a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 console.log(element + ‘, index = ‘ + index); });</p>
<p>函数：</p>
<p>函数定义：命名函数表达式，匿名函数表达式<br>参数: 　<br>js天生不定参，　函数的实参也可以是任意的数据类型.  JavaScript允许传入任意个参数而不影响调用.  python参数不可以。</p>
<p>(函数中用的严格模式，参数不能用默认值；)</p>
<p> 函数的参数如果特别多的话，可以使用 arguments实参列表 实参列表出生时有几个就有几个 但arguments值与形参相互映射  获取函数实参：rest参数只能写在最后，前面用…标识</p>
<p>获得形参个数：(fun.length)</p>
<p> js默认return返回undefined类型 Python默认None   js中 null应用场景： 表示对象不存在</p>
<p>作用域：</p>
<p>一般局部变量退出作用域之后会销毁，（但是内部的函数被保存到外部，生成闭包，依旧继承着上级作用域 ）全局变量关闭网页或浏览器才会销毁</p>
<p>作用域链[[scope ]] :隐式属性： 由外到内一级级继承GO， AO对象</p>
<p> 闭包:</p>
<p>　　内部的嵌套函数被保存到外部，生成闭包，依旧继承着上级作用域<br>函数定义内容在预编译之后才执行：函数定义不会对变量有影响，只是占用了空间</p>
<p>arr[i] = function (){<br>console.log(i);  // 变量i不会相互影响<br>}
　　</p>
<p>预编译：</p>
<p>没有函数嵌套：考虑全局预编译，（全局预编译 全局变量，函数挂载到GO对象）</p>
<p>function add (n){<br>   return n+1;<br>}<br>function add (n){<br>   return n+3;<br>}  // 函数名称相同则覆盖　　<br>再函数预编译（先提升变量声明，再提升内部function整体；再执行函数体【先看自己的 AO再看全局的 GO】）</p>
<p>（函数）预编译的四部曲：  预编译发生在函数执行的前一刻</p>
<p>1.创建 AO 对象 Activation Object(执行期上下文)，每一次执行都重新产生AO</p>
<p>2.找形参和变量声明，将变量和形参名作为 AO 属性名，值为 undefined</p>
<p>AO{</p>
<p>a : undefined,</p>
<p>b : undefined }</p>
<p>3.把实参值传到形参里</p>
<p>4.找函数声明，其函数体赋予给值，函数名为属性 （先看自己的 AO，再看全局的 GO）</p>
<p>立即执行函数：（函数立即释放）只有表达式可以立即执行；加上运算符如（）变表达式</p>
<p>function test（a,b）{<br>　　console.log(‘1’)<br>}（1,2）;   // 不打印，会解析成函数定义和一个表达式</p>
<p>　</p>
<p>面向对象</p>
<p> 内置对象：Math/Array/Number/String/Boolean…</p>
<p>构造函数：<br> 任何函数都可以当成构造函数 ，只要把一个函数通过new的方式来进行调用<br> 自定义构造函数：<code>function CreateFunc(){ }</code></p>
<p>创建对象：</p>
<ol>
<li><p>对象字面量 {}</p>
</li>
<li><p>构造函数的方法来创建对象：  new 构造函数（）</p>
</li>
</ol>
<p>构造函数内部原理：</p>
<p>1.在函数体最前面隐式的加上 var this = {} 空对象</p>
<p>2.执行 this.xxx = xxx;</p>
<p>3.隐式的返回 return this</p>
<p>如果函数返回了一个复杂数据类型的值，那么本次函数的返回值就是该值</p>
<pre><code>function fn3(){
    return [1,3,5];
}</code></pre><p>　　　　　var f3=new fn3();   //f3还是fn3的实例吗？错<br>        //f3值为[1,3,5]<br>构造函数（大驼峰式命名）： 构造函数默认有prototype属性 指向原型对象（继承原型对象共有东西）</p>
<p>　　原型对象默认有constructor属性指向构造函数<br>　　实例对象默认<strong>proto</strong>属性 指向原型对象：以便实例对象没有的属性会到原型查找</p>
<p> 包装类：new Number() new String()  new Boolean()</p>
<p>　　var num = 4；</p>
<p>　　num.len = 3; //系统隐式的加上 new Number(4).len = 3; 然后 delete</p>
<p>　　console.log(num.len);   =&gt;undefined<br>继承：</p>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/js/" rel="tag"># js</a>
              <a href="/tags/前端/" rel="tag"># 前端</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2018/11/26/spider/" rel="prev" title="spider">
      <i class="fa fa-chevron-left"></i> spider
    </a></div>
      <div class="post-nav-item">
    <a href="/2018/11/26/http-note/" rel="next" title="HTTP协议">
      HTTP协议 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="gitalk-container"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">zhiheng</p>
  <div class="site-description" itemprop="description">programming and life</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">10</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">9</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">9</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yuwengeng" title="GitHub → https://github.com/yuwengeng" rel="noopener" target="_blank"><i class="github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://www.cnblogs.com/yuwengeng/" title="博客园 → https://www.cnblogs.com/yuwengeng/" rel="noopener" target="_blank"><i class="globe fa-fw"></i>博客园</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yuwenzhiheng95@gmail.com" title="E-Mail → mailto:yuwenzhiheng95@gmail.com" rel="noopener" target="_blank"><i class="envelope fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://weibo.com/yourname" title="Weibo → https://weibo.com/yourname" rel="noopener" target="_blank"><i class="weibo fa-fw"></i>Weibo</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://twitter.com/yourname" title="Twitter → https://twitter.com/yourname" rel="noopener" target="_blank"><i class="twitter fa-fw"></i>Twitter</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://instagram.com/yourname" title="Instagram → https://instagram.com/yourname" rel="noopener" target="_blank"><i class="instagram fa-fw"></i>Instagram</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">zhiheng</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        
<div class="busuanzi-count">
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="//cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/schemes/muse.js"></script>
<script src="/js/next-boot.js"></script>
  <script>
var pjax = new Pjax({
  selectors: [
    'head title',
    '#page-configurations',
    '.content-wrap',
    '.post-toc-wrap',
    '.languages',
    '#pjax'
  ],
  switches: {
    '.post-toc-wrap': Pjax.switches.innerHTML
  },
  analytics: false,
  cacheBust: false,
  scrollTo : !CONFIG.bookmark.enable
});

window.addEventListener('pjax:success', () => {
  document.querySelectorAll('script[data-pjax], script#page-configurations, #pjax script').forEach(element => {
    var code = element.text || element.textContent || element.innerHTML || '';
    var parent = element.parentNode;
    parent.removeChild(element);
    var script = document.createElement('script');
    if (element.id) {
      script.id = element.id;
    }
    if (element.className) {
      script.className = element.className;
    }
    if (element.type) {
      script.type = element.type;
    }
    if (element.src) {
      script.src = element.src;
      // Force synchronous loading of peripheral JS.
      script.async = false;
    }
    if (element.dataset.pjax !== undefined) {
      script.dataset.pjax = '';
    }
    if (code !== '') {
      script.appendChild(document.createTextNode(code));
    }
    parent.appendChild(script);
  });
  NexT.boot.refresh();
  // Define Motion Sequence & Bootstrap Motion.
  if (CONFIG.motion.enable) {
    NexT.motion.integrator
      .init()
      .add(NexT.motion.middleWares.subMenu)
      .add(NexT.motion.middleWares.postList)
      .bootstrap();
  }
  NexT.utils.updateSidebarPosition();
});
</script>




  















    <div id="pjax">
  

  

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">

<script>
NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
    var gitalk = new Gitalk({
      clientID    : '24ef63b5f7c6e9d3a198',
      clientSecret: '5cceec5609a0910c5f361eaaefdbe57ae7c5d359',
      repo        : 'yuwengeng.github.io',
      owner       : 'yuwengeng',
      admin       : ['yuwengeng'],
      id          : '00a38c62e226502ff2627f8accb9723a',
        language: '',
      distractionFreeMode: true
    });
    gitalk.render('gitalk-container');
  }, window.Gitalk);
});
</script>

    </div>
</body>
</html>
